<template>
  <el-container :direction="vertical">
    <el-header height="75" id="header">
      <div class="left">
        <h1 class="title">盛邦升华考试平台</h1>
        <div class="back">
          <router-link to="/admin/home">
            <i class="icon el-icon-s-home"></i>
            <span>返回首页</span>
          </router-link>
        </div>
      </div>
      <div class="user-info">
        <router-link class="logout" to="/login" @click.native="logout">
          <i class="icon el-icon-switch-button"></i>
          退出
        </router-link>
        <span class="user-msg">
          <i class="icon el-icon-bell"></i>
          消息
        </span>
        <span class="">
          <img src="../../assets/logo.png" alt="头像" width="25"  height="25"/>
          <span class="user-name">超级管理员</span>
          <i class="el-icon-arrow-down"></i>
        </span>
      </div>
    </el-header>
    <el-container :direction="horizontal">
      <el-aside width="200px" id="aside">
        <el-menu
          default-active="/admin/home"
          class="el-menu"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          router
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-set-up"></i>
              <span>题库管理</span>
            </template>
            <el-menu-item index="/admin/question/List">题库列表</el-menu-item>
            <el-menu-item index="1-2">试题新增</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-printer"></i>
              <span>试卷管理</span>
            </template>
            <el-menu-item index="2-1">试卷列表</el-menu-item>
            <el-menu-item index="2-2">试卷新增</el-menu-item>
            <el-menu-item index="2-3">生成试卷</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>系统管理</span>
            </template>
            <el-menu-item index="3-1">用户列表</el-menu-item>
            <el-menu-item index="3-2">新增用户</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container :direction="vertical" id="content">
        <router-view> </router-view>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import {removeItem} from "@/utils/storage.js"
export default {
  data() {
    return {
      horizontal:"horizontal",
      vertical:"vertical"
    };
  },
  methods:{
   handleLogout(){
     removeItem("userInfo");// 删除用户信息
     removeItem("userRole");// 删除角色信息
     removeItem("token");// 删除token
     this.$router.push("/login");
   }
  }
};
</script>

<style lang="scss" scoped>
#header {
  position: fixed;
  z-index: 9;
  width: 100%;
  display: flex;
  justify-content: space-between;
  color: #fff;
  line-height: 75px;
  background-color: #00337e;
  line-height: 75px;
  .left {
    display: flex;
    h1 {
      padding-right: 20px;
      border-right: 2px solid #245091;
    }
    a {
      color: #fff;
      margin-left: 20px;
      text-decoration: none;
      font-size: 18px;
    }
  }
  //头部右侧个人信息
  .user-info{
    display: flex;
    .logout{
      color: white;
      padding: 0 20px;
      border-right: 2px solid #245091;
       text-decoration: none;
    }
    .user-msg{
       padding: 0 20px;
      border-right: 2px solid #245091;
    }
    .user {
      padding: 0 20px;
      img{
        vertical-align: middle;
        border-radius: 50%;
      }
      .user-name{
        padding-left: 20px;
      }
    }
  }
}

#aside {
  position: fixed;
  left: 0;
  top: 75px;
  bottom: 0;
  .el-menu{
    height: 100%;
  }
}
#content{
  margin-left: 200px;
  margin-top: 75px;
}
</style>
